<template>
  <section class="course-list-section">
    <a-form ref="formRef" :model="formState" :rules="rules">
      <a-row :gutter="24">

        <a-col :span="24" style="text-align: left">
          <a-button type="primary" html-type="submit" @click="accountNumberDetail(undefined)">
            创建账号
          </a-button>
        </a-col>
      </a-row>
    </a-form>
  </section>
  <section class="course-list-section">
    <a-table :columns="columns" :data-source="curriculums">
      <template #bodyCell="{text,record,index,column}">
        <!--性别-->
        <span v-if="column.key === 'gender'">
          {{ getGender(text) }}
        </span>
        <!--状态-->
        <span v-if="column.key === 'status'">
          {{ getStatus(text) }}
        </span>
        <!--年龄-->
        <span v-if="column.key === 'age'">
          {{ text }}岁
        </span>
        <!--角色-->
        <span v-if="column.key === 'role'">
          {{ getRole(text) }}
        </span>
        <!--操作-->
        <div v-if="column.key=== 'action'">
          <a-button type="link" @click="accountNumberDetail(record.id)">
            编辑
          </a-button>
          <a-button type="link">删除</a-button>
          <a-button type="link">禁用</a-button>
          <a-button type="link">启用</a-button>
        </div>
      </template>
    </a-table>
  </section>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import {users} from "@/api";
import {computed, onMounted, reactive, ref} from "vue";
import {$ref} from "vue/macros";
import type {Rule} from "ant-design-vue/es/form";
import type {FormInstance} from "ant-design-vue";
//按钮间距
const spaceSize = ref(0)
const roleOptions = [
  {value: '0', label: '讲师'},
  {value: '1', label: '学生'}
]
const genderOptions = [
  {value: '0', label: '男'},
  {value: '1', label: '女'}
]
//课程类型
const typeOptions = [
  {value: '0', label: '公开课程'},
  {value: '1', label: '直播课程'},
  {value: "2", label: '录播课程'},
];
//课程状态
const statusOptions = [
  {value: '0', label: '禁用'},
  {value: '1', label: '启用'}
]
//表单数据
const formState = reactive({
  type: "", openingTime: "", classId: ""
})
//表单ref
const formRef = ref<FormInstance>()
//表单验证
const rules: Record<string, Rule[]> = {}
//课程表
const columns = [
  {title: "头像", dataIndex: "icon", ellipsis: true},
  {title: "昵称", dataIndex: "userName"},
  {title: "账号", dataIndex: "accountNumber"},
  {title: "年龄", dataIndex: "age", key: "age"},
  {title: "性别", dataIndex: "gender", key: "gender"},
  {title: "角色", dataIndex: "role", key: "role"},
  {title: "操作", key: "action"}
]
//路由
const router = useRouter();
//课程表数据
let curriculums = $ref()
onMounted(() => {
  getCurriculum()
})
/**
 * 获取课程类型
 */
const getType = computed(() => {
  return function (type: string | number) {
    return typeOptions.find(item => item.value === String(type))?.label
  }
})
/**
 * 获取性别
 */
const getGender = computed(() => {
  return function (gender: string | number) {
    return genderOptions.find(item => item.value === String(gender))?.label
  }
})
/**
 * 获取角色
 */
const getRole = computed(() => {
  return function (role: string | number) {
    return roleOptions.find(item => item.value === String(role))?.label
  }
})
/**
 * 获取状态
 */
const getStatus = computed(() => {
  return function (status: string | number) {
    return statusOptions.find((item => item.value === String(status)))?.label
  }
})

/**
 * 课程列表
 */
function getCurriculum() {
  users({}).then((res) => {
    console.log("getCurriculum", res)
    curriculums = res.data
  })
}

/**
 * 搜索课程
 * @param val
 */
function classSearch(val: string) {

}

/**
 * 课程详情
 * @param id
 */
function accountNumberDetail(id: string | number | undefined) {
  router.push({path: "/accountNumber/accountNumberDetail", query: {id}})
}
</script>
<style scoped lang="less">
.course-list-section {
  position: relative;
  padding: 20px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-line {
  position: relative;
  padding: 50px 0;
  text-align: center;

  h5 {
    position: relative;
    margin-bottom: 20px;
    font-size: 32px;
    z-index: 1;
    color: #333;
  }
}

.line {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  margin-top: -1px;
  z-index: -1;
}

.subtitle {
  font-size: 16px;
  color: #999;
}

.more-course-button {
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  float: right;
}

.teacher-container {
  /deep/ .ant-card-body {
    padding: 0;
  }

  .teacher-item {
    text-align: center;

    .teacher-top {
      position: relative;
      z-index: 1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #f5f8fa;
      padding: 20px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar-lg {
        width: 60%;
        height: 60%;
        border-radius: 50%;
        border: 4px solid #fff;
      }

      .title {
        color: #333333;
      }

      .subtitle {
        color: #c1c1c1;
        font-size: 14px;
      }
    }

    .teacher-bottom {
      position: relative;
      height: 90px;
      line-height: 25px;
      box-sizing: border-box;
      padding: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
